﻿@{
    ViewBag.Title = "菜单按钮信息编辑";
    Layout = "~/Views/Shared/_LayoutPageBaseEdit.cshtml";
}
@model EIP.System.Models.Dtos.Permission.SystemMenuButtonOutput
<div class="box-body">
    <div class="col-md-12">
        <div class="form-group">
            <label class="col-sm-2 control-label m">归属菜单</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" id="menuName" value="@Model.MenuName" class="form-control" data-pure-clear-button placeholder="归属菜单">
                    <span id="menuBtn" onclick=" showMenu(); return false; " class="input-group-addon pointer"><i class="fa fa-sitemap"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">名称</label>
            <div class="col-sm-10">
                <input type="text" name="name" id="name" value="@Model.Name" data-pure-clear-button class="form-control" placeholder="名称">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">图标</label>
            <div class="col-sm-10">
                <input type="text" name="icon" value="@Model.Icon" data-pure-clear-button class="icon-picker">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">方法</label>
            <div class="col-sm-10">
                <input type="text" name="script" id="script" value="@Model.Script" data-pure-clear-button class="form-control" placeholder="方法">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label m">排序号</label>
            <div class="col-sm-10">
                <input type="text" value="@Model.OrderNo" name="orderNo" class="form-control" data-pure-clear-button placeholder="排序号">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="remark" data-pure-clear-button placeholder="备注">@Model.Remark</textarea>
            </div>
        </div>
    </div>
</div>
@Html.HiddenFor(f => @Model.MenuId)
@Html.HiddenFor(f => @Model.MenuButtonId)
<div class="combotree-popup dropdown-menu" id="menuContent" style="display:none;">
    <div class="ip-control">
        <div class="box-tools">
            <div class="input-group" style="width: 272px;padding-left:5px">
                <input type="text" id="searchMenuKey" class="form-control input-sm" placeholder="请输入名称进行模糊查询...">
                <div class="input-group-btn">
                    <a class="btn btn-sm btn-default" id="searchMenu"><i class="fa fa-search"></i></a>
                </div>
            </div>
        </div>
    </div>
    <ul id="menuTree" class="ztree" style="margin-top:0; height: 223px; overflow: auto"></ul>
</div>
<script>
    var form = null;
    $(function () {
        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
            checkboxClass: 'icheckbox_minimal-blue',
            radioClass: 'iradio_minimal-blue'
        });
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
            checkboxClass: 'icheckbox_minimal-red',
            radioClass: 'iradio_minimal-red'
        });
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        });
        $(".icon-picker").iconPicker();
        $.each($("input:text, input:password, " +
                "input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='number'], " +
                "input[type='datetime'],textarea", $("#editform")),
            function (index, element) {
                var $element = $(element);
                if (($element.attr("data-pure-clear-button") == undefined || $element.attr("data-pure-clear-button") === 'false') && !$element.hasClass("has-pure-clear-button")) {
                    return;
                }
                $element.pureClearButton("create");
            });

        ValidformNeed();

        initForm();
    });

    function initForm() {
        //初始化控件
        form = $("#editform").form();
        //数据校验
        $("#editform").formValidation({
            message: '请输入有效值',
            trigger: 'blur',
            fields: {
                name: {
                    validators: {
                        notEmpty: {
                            message: '请输入姓名'
                        }
                    }
                },
                menuName: {
                    validators: {
                        notEmpty: {
                            message: '请选择归属菜单'
                        }
                    }
                }
            }
        }).on('success.form.fv', function (e) {
            var data = form.getFormSimpleData();
            UtilAjaxPostWait("/System/MenuButton/SaveMenuButton",
          data, function (data) {
              if (DialogAjaxResult(data)) {
                  menuObj = { id: $("#MenuId").val() };
                  loadTreeAndGrid();
                  //关闭
                  dialog.close();
              }
          });
            return false;
        });
    }

</script>
<script type="text/javascript">

    var setting = {
        view: {
            dblClickExpand: false
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: onClick
        }
    };

    function onClick(e, treeId, treeNode) {
        $("#MenuId").val(treeNode.id);
        //加载数据
        $("#menuName").val(treeNode.name);
    }

    function showMenu() {
        var cityObj = $("#menuName");
        var cityOffset = $("#menuName").offset();
        var editformOffset = $("#editform").offset();
        $("#menuContent").css({ left: cityOffset.left - editformOffset.left + "px", top: (cityOffset.top + cityObj.outerHeight() + 6) - editformOffset.top + "px" }).slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }

    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }

    function onBodyDown(event) {
        if (!(event.target.id === "menuBtn" || event.target.id === "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    $(document).ready(function () {
        //判断是否具有筛选菜单条件
        var postUrl = "/Common/UserControl/GetMenuRemoveChildren";
        UtilAjaxPostAsync(postUrl, {
            menuId: $("#MenuId").val(),
            isRemove: false
        }, function (data) {
            combotreeMenuTreeObj = $.fn.zTree.init($("#menuTree"), setting, data);
        });
        $('#searchMenu').on("click", function (e) {
            search($("#searchMenuKey").val());
        });

        $('#searchMenuKey').on("keyup", function (e) {
            search($(this).val());
        });
    });
    var combotreeMenuTreeObj = null;

    function search(p) {
        if (combotreeMenuTreeObj) {
            var rootNodes = combotreeMenuTreeObj.getNodes(),
                allNodes = combotreeMenuTreeObj.transformToArray(rootNodes),
                checkedNodes = combotreeMenuTreeObj.getCheckedNodes(true);
            $.each(checkedNodes, function () {
                combotreeMenuTreeObj.checkNode(this, false);
            });
            combotreeMenuTreeObj.cancelSelectedNode();
            if (p) {
                combotreeMenuTreeObj.hideNodes(allNodes);
                var nodes = combotreeMenuTreeObj.getNodesByParamFuzzy('name', p),
                    parentNode,
                    o = {};
                $.each(nodes, function (i, node) {
                    if (!node.isParent) {
                        parentNode = node.getParentNode();
                        o[node.tId] = node;
                        while (parentNode) {
                            o[parentNode.tId] || (o[parentNode.tId] = parentNode);
                            parentNode = parentNode.getParentNode();
                        }
                    }
                    return true;
                });
                $.each(o, function (key, value) {
                    combotreeMenuTreeObj.showNode(value);
                });
                $.each(rootNodes, function (i, node) {
                    node.isParent && o[node.tId] && combotreeMenuTreeObj.expandNode(node, true, true);
                });
            } else {
                combotreeMenuTreeObj.showNodes(allNodes);
                combotreeMenuTreeObj.expandAll(false);
            }
        }
    }

</script>
